<template>
    <div class="message">
        <transition name="FadeIn">
            <div  v-show="visible" v-if="type == 'success'">
                <div class="message-box success">
                    <i class="iconfont icon-caiyaowangtubiaoku_xixiangou"></i>
                    <p>{{msg}}</p>
                    
                </div>
                <div class="graybg"></div>
            </div>
            <div v-show="visible"  v-if="type == 'error'">
                <div class="message-box error" >
                    <i class="iconfont icon-caiyaowangtubiaoku_yuanjiaoguanbi"></i>
                    <p>{{msg}}</p>
                </div>
                <div class="graybg"></div>
            </div>
            <div v-show="visible" v-if="type == 'warning'">
                <div class="message-box warning">
                    <i class="iconfont icon-tubiaomoban_jinggao"></i>
                    <p>{{msg}}</p>
                    <div class="graybg"></div>
                </div>
            </div>
            <div  v-show="visible" v-if="type == 'success1'">
                <div class="message-box success1">
                    <i class="icon"></i>
                    <p>{{msg}}</p>
                </div>
                <div class="graybg"></div>
            </div>
            <div  v-show="visible" v-if="type == 'error1'">
                <div class="message-box error1">
                    <i class="icon"></i>
                    <p>{{msg}}</p>
                </div>
                <div class="graybg"></div>
            </div>
         
        </transition>
    </div> 
</template>

<script>
export default {
    data(){
        return{
            visible: false,
            type: 'success',
            msg: '提示'
        }
    }
}
</script>

<style lang="scss">

.message {
    .graybg{
        background-color: rgba(0,0,0,0.3);
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 2000;
    }
    .message-box{
        position: fixed;
        top: 45%;
        left: 0;
        right: 0;
        margin: auto;
        /*height: 60px;*/
        width: 400px;
        background-color: #FFF;
        line-height: 40px;
        padding: 20px;
        font-size: 28px;
        border-radius:5px;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
        z-index: 2501;
        border-radius: 10px;
        i{
            color: #fff;
            margin-right: 10px;
            display: inline-block;
            float: left;
            width: 40px;
            height: 40px;
            line-height:35px;
            text-align: center;
            position: relative;
            &:before{
                display:inline-block;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                font-size: 12px;
            }
        }
        p{
            overflow: hidden;
        }
        &.success{
            background-color:#f0f9eb;
            color: #67c23a;
            /*border:#67c23a 1px solid;*/
        }
        &.success i{
            background-color: #67c23a;
            color: #fff;
            border-radius: 100%;
        }
        &.success1{
            width: 80%;
            text-align: center;
            padding: 50px 0;
            font-size: 26px;
            line-height: 2;
        }

        
        &.error1{
            width: 80%;
            text-align: center;
            padding: 50px 0;
            font-size: 26px;
            line-height: 2;
        }

       
        &.error{
            background-color:#fef0f0;
            color: #f56c6c;
            /*border:#f56c6c 1px solid;*/
        }
        &.error i{
            background-color: #f56c6c;
            color: #fff;
            border-radius: 100%;

        }
        &.warning{
            background-color:#fdf6ec;
            color: #e6a23c;
            /*border:#e6a23c 1px solid;*/
        }
        &.warning i{
            background-color: #e6a23c;
            color: #fff;
            border-radius: 100%;

        }
    }
}


.Fade-enter-active{animation-name: fadeIn;animation-duration: .5s;animation-fill-mode: both;}
.Fade-leave-active{animation-name: fadeOut;animation-duration: .2s;animation-fill-mode: both;}

@keyframes fadeIn{from{opacity: 0;}
    to{opacity: 1;}}
@keyframes fadeOut{from{opacity: 1;}
    to{opacity: 0;}}

.FadeIn-enter-active{animation-name: fadeInDown;animation-duration: .3s;animation-delay: .2s;animation-fill-mode: both;}
.FadeIn-leave-active{animation-name: fadeInUp;animation-duration: .3s;animation-delay: .2s;animation-fill-mode: both;}

@keyframes fadeInUp{from{transform: none;opacity: 1;}
    to{transform: translate3d(0, -30%, 0);opacity: 0;}}
@keyframes fadeInDown{from{transform: translate3d(0, -30%, 0);opacity: 0;}
    to{transform: none;opacity: 1;}}
</style>

